<template>
	<view class="">
		<view class="bg-w pd15">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="180rpx">
				<u-form-item label="所属供应商" prop="commercialOwnerText" ref="item1" :required="true"
					@click="showCommercial=true">
					<u--input v-model="model1.commercialOwnerText" border="surround" suffixIcon="arrow-down"
						placeholder="请选择所属供应商" suffixIconStyle="color: #909399"></u--input>
				</u-form-item>
				<u-form-item label="单据日期" prop="documentDate" ref="item1" :required="true" @click="showDate=true">
					<u--input v-model="model1.documentDate" border="surround" placeholder="请选择单据日期"></u--input>
				</u-form-item>
				<u-form-item label="单据编号" prop="documentNumber" :required="true" ref="item1">
					<u--input v-model="model1.documentNumber" border="surround" clearable disabled
						placeholder="请输入单据编号"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="plr15 bg-w mt10" style="padding-bottom: 30rpx;">
			<view class="flex spaceb plt15">
				<view>商品</view>
				<view class="flex">
					<view class="flex alcenter">
						<view class="mr5">
							<u-icon name="scan" size="20" color="#6A6A6A"></u-icon>
						</view>
						<view>扫码</view>
					</view>
					<view class="flex alcenter ml20" @click="$u.route('/pages/basicData/commodity/list')">
						<view class="mr5">
							<u-icon name="list-dot" size="20" color="#6A6A6A"></u-icon>
						</view>
						<view>选择</view>
					</view>
				</view>
			</view>
			<view class="plt15 border-top" v-for="(item,index) in model1.procureOrderFormList" :key="index">
				<view class="flex spaceb">
					<view class="flex alcenter">
						<view class="number">01</view>
						<view class="ml10">凹槽贴皮壳皮料(苹果15PRO)</view>
					</view>
					<view class="flex alcenter">
						<view class="mr10">10x1个</view>
						<u-icon name="arrow-right" size="16" color="#6A6A6A"></u-icon>
					</view>
				</view>
				<view class="cl-hui mt5">仓库：正常</view>
				<view class="cl-hui">折扣额：0</view>
				<view class="cl-hui">合计：10</view>
				<view class="flex spaceb">
					<view class="cl-hui">备注：</view>
					<view class="">
						<u-icon name="trash" size="20" color="#6A6A6A"></u-icon>
					</view>
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="无数据" v-if="model1.procureOrderFormList==''"
				marginTop="50rpx">
			</u-empty>
		</view>
		<view v-if="!model1.procureOrderFormList">
			<view class="pd15 mt10 bg-w">
				<span>总条数:3</span>
				<span class="ml10">总数量:3</span>
				<span class="ml10">总折扣额:3</span>
			</view>
			<view class="bg-w pd15 mt10">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="180rpx">
					<u-form-item label="制单人" prop="creator" ref="item1" @click="showCreator=true">
						<u--input v-model="model1.creator" border="surround" placeholder="请选择制单人"></u--input>
					</u-form-item>
					<u-form-item label="审核状态" prop="review_status" ref="item1" @click="showReview=true">
						<u--input v-model="model1.review_status" border="surround" placeholder="请选择审核状态"></u--input>
					</u-form-item>
					<u-form-item label="单据附件" prop="doc_annex" ref="item1">
						<u--input v-model="model1.doc_annex" border="surround" placeholder="请上传单据附件" suffixIcon="attach"
							suffixIconStyle="color: #909399"></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="doc_annex" ref="item1">
						<u--textarea v-model="model1.remarks" border="surround" placeholder="请输入备注"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<u-button type="primary" text="保存" @click=""></u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="left" :closeable="true">
			<view class="popBox pd15">
				<view>查询</view>
				<view class="mt10">
					<u--input placeholder="单据编号" border="surround" clearable v-model="search.documentNumber"></u--input>
				</view>
				<view class="mt10" @click="showSupplier=true">
					<u--input placeholder="审核状态" suffixIcon="arrow-down" v-model="search.supplierDictText"
						suffixIconStyle="color: #909399"></u--input>
				</view>
				<view class="btns">
					<view class="chongzhi">重置</view>
					<view class="confirm">确认</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="showCommercial" :columns="commercial" @confirm="confirmCommercial" @cancel="close"></u-picker>
		<u-picker :show="showCreator" :columns="creator" @confirm="confirmCreator" @cancel="close"></u-picker>
		<u-picker :show="showReview" :columns="reviewStatus" @confirm="confirmReview" @cancel="close"></u-picker>
		<!-- <u-calendar :show="showDate" :mode="mode" :maxDate="maxDate" :defaultDate="defaultDateMultiple"
			@confirm="confirmDate" @close="close"></u-calendar> -->
		<u-datetime-picker :show="showDate" v-model="timeStamp" mode="date" @confirm="confirmDate" @close="close"></u-datetime-picker>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				model1: {
					commercialOwner: "",
					commercialOwnerText:"",
					creator: "",
					docAnnex: "",
					documentDate: "",
					documentNumber: "",
					id: "",
					procureOrderFormList: [],
					productNumber: "",
					remarks: ''
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'commercial_owner': {
						type: 'string',
						required: true,
						message: '请选择所属商户',
						trigger: ['change']
					},
					'document_date': {
						type: 'string',
						required: true,
						message: '请选择单据日期',
						trigger: ['change']
					},
					'document_number': {
						type: 'string',
						required: true,
						message: '请输入单据编号',
						trigger: ['blur', 'change']
					}
				},
				showCommercial: false,
				commercial: [
				],
				showCreator: false,
				creator: [
					['商户1', '商户12']
				],
				showReview: false,
				reviewStatus: [
					['商户1', '商户12']
				],
				showDate: false,
				mode: 'single',
				minDate: '1970-01-01',
				maxDate: '2100-01-01',
				defaultDateMultiple: `${year}-${month}-${date}`,

				// commercialOwner: "SH-240704-003",
				// creator: "1714471285016895490",
				// documentDate: "2024-07-23 13:13:57",
				// documentNumber: "CGDD-240723-003",
				// procureOrderFormList: [{
				// 	id: "row_117",
				// 	number: "10",
				// 	productNumber: "SP-240716-003",
				// 	products: "衣柜1",
				// 	purchaseUnitPrice: 1000,
				// 	remarks: "",
				// }, {
				// 	id: "row_118",
				// 	number: "20",
				// 	productNumber: "SP-240722-002",
				// 	products: "内衣",
				// 	purchaseUnitPrice: 11,
				// 	remarks: ""
				// }]
				// productNumber: "SP-240716-003"
				timeStamp: Number(new Date())
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.fin_ghdh_bill_no()
			this.getDictItemscialOwner()
			// this.getDictItemsSysUser()
			this.model1.documentDate = this.$u.timeFormat(this.timeStamp, 'yyyy-mm-dd');
		},
		onShow() {
			// this.isLogin = checkLogin()
			// if (!this.isLogin) {
			// 	this.isloginBind()
			// 	return false
			// }

		},
		methods: {

			//fin_zh_bill_no账户编号
			fin_ghdh_bill_no() {
				this.$apiss.fin_ghdh_bill_no().then(res => {
					this.model1.documentNumber = res.result
				})
			},
			getDictItemscialOwner() {
				console.log('22');
				this.$apiss.getDictItemscialOwner().then(res => {
					this.commercial[0] = res.result
					// this.model1.accCode = res.result
				})
			},
			getDictItemsSysUser() {
				this.$apiss.getDictItemsSysUser().then(res => {
					// this.model1.accCode = res.result
				})
			},
			select(e) {
				this.intindex = e
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showCommercial = false
				this.showDate = false
				// console.log('close');
			},
			confirmCommercial(e) {
				console.log(e.value[0])
				this.model1.commercialOwner = e.value[0].value
				this.model1.commercialOwnerText = e.value[0].label
				this.close()
			},
			confirmDate(e) {
				this.model1.documentDate = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.close()
			},
		},


	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.icon {
		border: 1px solid #E0E0E0;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.add {
		background-color: #3247D3;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.cl-status {
		color: #6A6A6A;
	}

	.pore {
		position: relative;
	}

	.popBox {
		width: 400rpx;
		height: 100%;
		position: relative;

		.btns {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
			display: flex;
			justify-content: space-around;

			.chongzhi {
				border: 1px solid #E0E0E0;
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
			}

			.confirm {
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				background-color: #3247D3;
				color: #fff;
			}
		}
	}

	.border-top {
		border-top: 1px solid #F8F8F8;
	}

	.number {
		background-color: #3247D3;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
	}
</style>